<template>
  <!-- <el-col :span="control.span"> -->
  <el-col
    :xs="24"
    :sm="control.type == 'table' ? 24 : 12"
    :md="control.span | spanFileter"
    :lg="control.span | spanFileter"
    :xl="control.span | spanFileter"
  >
    <control class="dynamic-col">
      <el-form-item :label="control.label">
        <el-row :gutter="10" style="min-height: 200px" class="dynamic-col">
          <draggable
            v-model="orderedcontrols"
            :animation="500"
            dragClass="dragClass"
            ghostClass="ghostClass"
            chosenClass="chosenClass"
            v-bind="{
              group: { name: 'controlpanel' },
              sort: true,
            }"
          >
            <transition-group>
              <dynamicCol
                @edit="editCtrl(control)"
                @remove="removeCtrl(index)"
                @copy="copyCtrl(index)"
                v-for="(control, index) in orderedcontrols"
                :key="index"
                :control="control || {}"
                v-model="bindModel(control)[control.field]"
                :isEdit="true"
                :isEditForm="isEditForm"
              >
              </dynamicCol>
            </transition-group>
          </draggable>
        </el-row>
        <div>
          <el-button type="text" @click="$emit('edit')">edit</el-button>
          <el-button type="text" @click="$emit('remove')">remove</el-button>
          <el-button type="text" @click="$emit('copy')">copy</el-button>
        </div>
      </el-form-item>
    </control>
  </el-col>
</template>

<script>
import draggable from "vuedraggable";
import dynamicCol from "./dynamicCol";
import control from "./control";
export default {
  name: "dynamicContainer",
  components: { draggable, dynamicCol, control },
  props: {
    control: {
      type: Object,
      default() {
        return {
          //   span: 12,
          //   type: "string",
          //   field: "field",
          //   label: "label",
          //   default: "",
          //   options: [],
        };
      },
    },
    value: null,
    isEdit: {
      type: Boolean,
      default: false,
    },
    isEditForm: {
      type: Boolean,
      default: false,
    },
  },
  filters: {
    spanFileter(span) {
      return isNaN(span) ? 8 : Number(span);
    },
  },
  model: {
    event: "change",
    prop: "value",
  },
  data() {
    return {
      thisValue: {},
    };
  },
  computed: {
    orderedcontrols: {
      get() {
        return this.control.options.filter((c) => c);
      },
      set(v) {
        this.control.options = v;
      },
    },
  },
  watch: {
    value() {
      this.thisValue = this.value;
    },
    thisValue: {
      deep: true,
      handler() {
        this.change(this.thisValue);
      },
    },
  },
  mounted() {
    console.log(this.control);
    this.thisValue = this.value;
  },
  methods: {
    change(newValue) {
      this.$emit("change", newValue);
    },
    bindModel(control) {
      if (!control) control = {};
      if (control.type == "empty") return {};
      if (!this.thisValue[control.field])
        this.$set(this.thisValue, control.field, control.default);
      return this.thisValue;
    },
    editCtrl(ctrl) {
      this.currentControl = ctrl;
      this.$emit("edit", this.currentControl);
    },
    copyCtrl(index) {
      var newObj = JSON.parse(JSON.stringify(this.control.options[index]));
      this.control.options.splice(index, 0, newObj);
    },
    removeCtrl(index) {
      this.control.options.splice(index, 1);
    },
  },
};
</script>

<style>
.dynamic-col {
  outline: solid 1px #ddd;
  cursor: move;
}
.dynamic-col:hover {
  outline: solid 1px #699;
  cursor: move;
}
</style>